<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>函数参数对象</title>
</head>

<body>

    <script src="./index.js"></script>
    <!-- 
        函数参数对象：
            arguments对象：函数的参数对象 只存在于函数当中；
                arguments.callee: 函数指针 指向函数本身；
                arguments.callee() 直接报错 最大调用栈溢出；
                arguments.length: 实参个数，传进去几个 就是几个；

            函数接受的参数形成的一个类数组对象；

            目前，尽量不要再函数内部调用自己，否则会栈溢出；
                func foo(){
                    foo() 没有结束条件 会溢出
                }

            有了这个东西，就可以处理很多不定参数的函数业务；

            箭头函数不是一个纯粹的函数 而是一个表达式 不存在arguments;

            那如何在使用箭头函数的情况下，接受不定参数？
                在ES6 中 新增了一种运算符： '...' 扩展运算符，
                可以扩展数组和对象...

                (...a) => log(a) // 打印一个数组
            扩展运算符: 
                
                可以打包剩余参数 比arguments好用，
                ...a 前面的参数可以单独处理 后面剩余的参数 都会被打包成一个参数数组；

                (a,b,...c) => log(a,b,c)
                (1,2,3,4,5,6) ==> 1,2, [3,4,5,6]
                
                就相当于，去超市买了若干东西 手上只能拿两样，剩余的就放在购物袋里提回去；

                同时，它也具备分发参数的能力：

                    也就是在函数参数中，传入一个数组，数组中包含了所需的参数；
                    此时就可以使用 ... 把数组展开(合并)到 rest 参数数组中；

                    let arr = [1,2,3,4]
                    
                    let foo = (...rest) => { 形参
                        log(rest)
                    }
                    foo(...arr) 实参 // 1 2 3 4

                    它将数组拆分成一个一个的内容

                    它还可以合并对象；
                    {...{a:1},...{b: 2}} ==> {a: 1,b: 2}

                其实这个扩展运算符本质上，是解构赋值：

                    解构赋值是es6的新的变量声明方式，
                    可以从数组、对象、模块中单独提取到所需的属性、方法等，
                    这样在其他地方调用的时候，就没必要把整个数组、对象抓过来占用资源了；

                    let [a,b,c] = [1,2,3]

                    let obj = {
                        print(){}
                    }
                    let {print} = obj

                    print()... 就可以直接使用 而不必通过对象去调用；
         
     -->
</body>

</html>